<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<!-- 
		注册一个全局组件语法格式如下：
		Vue.component(tagName, options)
		tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
		<tagName></tagName>
		所有实例都能用全局组件。
	 -->
	<div id="app">
		<runoob></runoob>
	</div>
	<script>
		// 注册
		Vue.component('runoob', {
			template: '<h1>自定义组件!</h1>'
		})
		// 创建根实例
		var app = new Vue({
			el: '#app'
		})
	</script>
	<h1>****************************</h1>
	<!-- 
		我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
	 -->
	<div id="app2">
		<runoob></runoob>
	</div>
		
	<script>
		var Child = {
			template: '<h1>自定义组件!</h1>'
		}
		// 创建根实例
		var app2 = new Vue({
			el: '#app2',
			components: {
			// <runoob> 将只在父模板可用
			'runoob': Child
			}
		})
	</script>
	<h1>****************************</h1>
	<!-- 
		prop 是父组件用来传递数据的一个自定义属性。
		父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
	 -->
	<div id="app3">
		<child message="hello!"></child>
	</div>
	<script>
		// 注册
		Vue.component('child', {
			// 声明 props
			props: ['message'],
			// 同样也可以在 vm 实例中像 "this.message" 这样使用
			template: '<span>{{ message }}</span>'
		})
		// 创建根实例
		var app3 = new Vue({
			el: '#app3'
		})
	</script>
	<h1>****************************</h1>
</body>
</html>